<template>
  <div class="classify">
    <div class="text">
      <img src="../images/mainOne/goodsClass/xin_03.png" />
      <span>{{title}}</span>
      <img src="../images/mainOne/goodsClass/xin_03.png" />
    </div>
    <div class="centeritem">
      <div class="center1" v-for="data in goodsData">
        <div class="item">
          <router-link :to="{'name':'goods',params:{'title':data.title_item}}">
            <img :src="data.img_url" />
            <p>{{data.title_item}}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "classify",
  props: {
    goodsData: {
      type: Array,
      default: []
    },
    title:{
      default:"未命名标题"
    }
  },
  data() {
    return {
    }
  },

}
</script>

<style lang='less' scoped>
.classify {
  .text {
    // margin: 30/75rem auto;
    text-align: center;
    img {
      width: 20/75rem;
      height: 20/75rem;
      display: inline-block;
    }
    span {
      font-size: 34/75rem;
    }
  }
  .centeritem {
    width: 710/75rem;
    height: 338/75rem;
    margin: 0 auto;
    box-shadow: 1px 1px 16PX gray;
    padding-bottom: 50/75rem;
    .center1 {
      .item {
        width: 60/75rem;
        height: 80/75rem;
        padding-left: 90/75rem;
        float: left;
        margin: 40/75rem 0;
        p {
          font-size: 30/75rem;
          color: #808080;
          text-align: center;
          margin-top: 15/75rem;
        }
      }
    }
  }
}
</style>
